<template>
    <div class="header">
        <yh-tabs v-model="editableTabsValue" @tab-remove="removeTab" @tab-click="tabClick" closable ref="tabs" type="card">
            <yh-tab-pane v-if="checkPermission('B_0343')" name="role-list">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    角色设置
                </span>
                <div class="uers-list">
                    <RoleList @refresh-list="refreshList" ref="role-list" />
                </div>
            </yh-tab-pane>
            <yh-tab-pane v-if="showResource || checkPermission('B_0344')" name="role-check">
                <span slot="label">
                    <i class="el-icon-tickets"></i>
                    角色复核
                </span>
                <div class="uers-list">
                    <RoleCheck @refresh-list="refreshListCheck" ref="role-check" />
                </div>
            </yh-tab-pane>
            <!-- 修改记录 -->
            <yh-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                <UpdateRecord :code="currentUserInfo.roleCode" title="角色" type="role"></UpdateRecord>
            </yh-tab-pane>
        </yh-tabs>
    </div>
</template>
<script lang="ts">
import { checkPermission } from '@/utils/tools';
import { getUser } from '@/utils/user-util';
import { Component, Vue } from 'vue-property-decorator';
import UpdateRecord from './auth-manage/update-record.vue';
import RoleCheck from './role-manage/role-check.vue';
import RoleList from './role-manage/role-list.vue';

@Component({
    name: 'RoleManage',
    components: {
        RoleList,
        RoleCheck,
        UpdateRecord,
    },
})
export default class RoleManage extends Vue {
    checkPermission = checkPermission;
    showResource: boolean = false; // 是否显示字段
    private editableTabs = []; // 所有tabs值
    private editableTabsValue: string = 'role-list'; // 当前标签
    currentUserInfo: any = {};
    timer = null;
    created() {
        this.$on('addTabs', this.changComponets);
    }
    mounted() {
        this.showResource = getUser().superuser;
        console.log(this.showResource, 'showResource');
        this.timer = setInterval(() => {
            this.refreshList();
            this.refreshListCheck();
        }, 20 * 60 * 1000);
    }

    beforeDestory() {
        this.timer && clearInterval(this.timer);
        this.timer = null;
    }

    // 监控子组件发送的命令
    changComponets(datas: any) {
        console.log(datas, 'datas');
        this.currentUserInfo = JSON.parse(JSON.stringify(datas));
        const data: any = {};
        data.title = '修改记录：' + datas.roleCode;
        data.name = '修改记录：' + datas.roleCode;
        const item = this.editableTabs.find((item: any) => item.name === data.name);
        if (!item) {
            this.addTab(data);
        } else {
            this.editableTabsValue = data.name;
        }
    }

    // 复核与列表之间的同步
    refreshList() {
        const $ref = this.$refs['role-check'] as any;
        if ($ref) {
            $ref.getTableData();
        }
    }

    refreshListCheck() {
        const $ref = this.$refs['role-list'] as any;
        if ($ref) {
            $ref.getRoleTableData();
        }
    }

    /* **************************  tab标签处理START ****************/
    // 点击当前标签或者切换标签
    tabClick() {
        if (this.editableTabsValue == 'role-list') {
            this.refreshListCheck();
        } else if (this.editableTabsValue == 'role-check') {
            this.refreshList();
        }
    }
    // 新增tabs
    addTab(targetName: any) {
        this.editableTabs.push(targetName);
        this.editableTabsValue = targetName.name;
    }

    // 关闭tabs
    removeTab(targetName: string) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
            activeName = 'role-list';
            tabs.forEach((tab: any, index: any) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    }
                }
            });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab: any) => tab.name !== targetName);
    }
}
</script>
<style lang="scss" scoped>
.header {
    min-width: 1200px;
    padding-top: 4px;
}
/deep/ .el-tabs > .el-tabs__header .el-tabs__item {
    border: 1px solid #e4e7ed;
    border-bottom: none;
    padding: 0 14px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    &:nth-child(2) {
        padding-left: 14px;
    }
    &:last-child {
        padding-right: 14px;
    }
}

.header /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.header /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.header /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}

.header /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(2) .el-icon-close {
    display: none;
}
/deep/ .el-tabs .el-tabs__nav {
    border: none;
    .is-active {
        border-color: #409eff;
        border-bottom: 2px solid #409eff;
    }
}
</style>
